<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:th="http://www.springframework.org/schema/jdbc">
<head>
	<meta charset="utf-8">
	<script src="js/selectcourse/vue.min.js"></script>
	<script src="js/selectcourse/vue.js"></script>
	<script src="js/selectcourse/vue-resource.min.js"></script>
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link href="css/selectcourse/bootstrap.min.css" rel="stylesheet">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="js/selectcourse/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="js/selectcourse/bootstrap.min.js"></script>
	<!-- meta使用viewport以确保页面可自由缩放 -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 引入 jQuery Mobile 样式 -->
	<link rel="stylesheet" href="css/selectcourse/jquery.mobile-1.4.5.min.css">
	<!-- 引入 jQuery 库 -->
	<script src="js/selectcourse/jquery.min.js"></script>
	<!-- 引入 jQuery Mobile 库 -->
	<script src="js/selectcourse/jquery.mobile-1.4.5.min.js"></script>
	<title>自主选课</title>
</head>
<body>
<div data-role="page" id="pageone">
	
	<!-- 面板 -->
	<div data-role="panel" id="myPanel">
		<a href="/index" data-ajax="false" class="ui-btn ui-icon-home ui-btn-icon-left">主页</a>
		<a href="/coursetablemobile" data-ajax="false" class="ui-btn ui-icon-lock ui-btn-icon-left">查看课表</a>
		<a href="/selectcoursemobile" data-ajax="false" class="ui-btn ui-icon-info ui-btn-icon-left">自主选课</a>
		<a href="/gradeinfomobile" data-ajax="false" class="ui-btn ui-icon-info ui-btn-icon-left">成绩查询</a>
		<a href="/StuLookThroughQuesMobile" target="_self" class="ui-btn ui-icon-home ui-btn-icon-left">论题列表</a>
		<a href="/StuChoiceMobile" target="_self" class="ui-btn ui-icon-lock ui-btn-icon-left">我的论题</a>
		<a href="/StuScoreMobile"  target="_self" class="ui-btn ui-icon-lock ui-btn-icon-left">我的成绩</a>
  	</div>
  	
  	<!-- 头部 -->
	<div data-role="header">
    	<a href="#myPanel" class="ui-btn ui-shadow ui-corner-all ui-icon-bullets ui-btn-icon-notext"></a>
    	<h1>教务管理系统</h1>
  	</div>
  	
  	<!-- 主体 -->
  	<div data-role="main" class="ui-content">
		<br>
  		<br>
  			<input data-type="search" placeholder="课程名" v-model="cname">
		<br>
  		<label>开课学院：</label>
  		<select v-model="college">
            <option value="" >所有</option>
  			<option th:each="college : ${collegelist}" th:value="${college.collegeName}">[[${college.collegeName} ]]</option>
  		</select>
  		<br>
  		<label>有无余量：</label>
  		<select v-model="capacity">
  			<option value="-1">所有</option>
  			<option value="0">有</option>
  			<option value="2">无</option>
  		</select>
  		<br>
  		<button type="button" class="btn btn-default" @click="getcourse()">查询</button>
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="btn-group">
                        <button class="btn btn-default" type="button" style="height:50px;width:110px" value="0" @click="getcoursebytype(0)">
                            <em class="glyphicon glyphicon-align-left"></em>必修</button>
                        <button class="btn btn-default" type="button" style="height:50px;width:110px" value="1" @click="getcoursebytype(1)">
                            <em class="glyphicon glyphicon-align-center"></em>选修</button>
                        <button class="btn btn-default" type="button" style="height:50px;width:110px" value="2" @click="getcoursebytype(2)">
                            <em class="glyphicon glyphicon-align-right"></em>通识</button>
                    </div>
                </div>
            </div>
        </div>
		<div class="panel-group" id="panel-431649">
			<div class="panel panel-default" v-for="course in course_selected">
				<div class="panel-heading" style="background:#94f575e3">
					<a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-431649"
					   v-bind:href="'#'+course.cno">{{course.cname}}/{{course.college}}/{{course.tname}}</a>
				</div>
				<div v-bind:id="course.cno" class="panel-collapse collapse">
					<div class="panel-body">
						<p>上课地点:{{course.address}}
							<br>
							上课时间:{{course.startWeek}}-{{course.endWeek}}周周{{course.week}}{{course.startStep}}-{{course.endStep}}节
							<br>
							课程容量:{{course.capacity}}
							<br>
							课程描述:{{course.description}}</p>
						<div>
							<input type="submit" class="btn btn-default btn-danger" value="退选" @click="canclecourse(course.cno)">
						</div>
					</div>
				</div>
			</div>

			<div class="panel panel-default" v-for="course in course_not_selected">
				<div class="panel-heading">
					<a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-431649"
					   v-bind:href="'#'+course.cno">{{course.cname}}/{{course.college}}/{{course.tname}}</a>
				</div>
				<div v-bind:id="course.cno" class="panel-collapse collapse">
					<div class="panel-body">
						<p>上课地点:{{course.address}}
							<br>
							上课时间:{{course.startWeek}}-{{course.endWeek}}周周{{course.week}}{{course.startStep}}-{{course.endStep}}节
							<br>
							课程容量:{{course.capacity}}
							<br>
							课程描述:{{course.description}}</p>
						<div>
							<input type="submit" class="btn btn-default btn-primary" value="选课" @click="selectcourse(course.cno)">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
    <!-- 底部 -->
    <div data-role="footer" data-position="fixed">
        <h1>版权所有© 北京化工大学 计科1601班</h1>
    </div>

</div>
</body>
</html>
<script type="text/javascript">
	var one = new Vue({
		el:"#pageone",
		data:{
			hide1:null,
			hide2:null,
			cname:"",
			college:"",
			capacity:"-1",
			courses:[],
			cno:null,
			tname:null,
			all_course:null,
			course_selected:null,
			course_not_selected:null,
			course_selected_cno:null,
		},
		methods:{
			contains:function(arr,elem){
				for(var i=0;i<arr.length;i++){
					if(arr[i].cno==elem.cno){ return true;}
				}
				return false;
			},
			getcourse:function(){
				this.$http.post("/filtercourse/",{college:this.college,cname:this.cname,
				capacity:this.capacity,cno:this.cno,tname:this.tname},{emulateJSON:true}).then(function(value){
					this.courses=value.body.data[0];
					this.all_course=value.body.data[0];
					this.course_selected_cno = value.body.data[1];
					this.course_selected=[];
					this.course_not_selected=[];
					for(var i=0;i<this.all_course.length;i++){
						if(this.contains(this.course_selected_cno,this.all_course[i])){
							this.course_selected.push(this.all_course[i]);
						}
						else{
							this.course_not_selected.push(this.all_course[i]);
						}
					}
				},function(reason){
					alert("请求出错");
				});
			},
			selectcourse:function(parm){
			    this.$http.post("/setcourseselected",{cno:parm},{emulateJSON:true}).then(function(value){
			        if(value.body.code==200){
			            var index=0;
			            for(var i=0;i<this.course_not_selected.length;i++){
			            	if(this.course_not_selected[i].cno==parm){
			            		this.course_selected.push(this.course_not_selected[i]);
			            		index=i;
			            		break;
			            	}
			            }
			            var arr=new Array();
			            for(var k=0;k<this.course_not_selected.length;k++){
			            	if(k!=index){
			            		arr.push(this.course_not_selected[k]);
			            	}
			            }
			            this.course_not_selected=arr;
			            console.log(this.course_selected);
			            console.log(this.course_not_selected);
			            alert("选课成功");
			            this.$http.post("/filtercourse/",{college:this.college,cname:this.cname,
						capacity:this.capacity,cno:this.cno,tname:this.tname},{emulateJSON:true}).then(function(value){
						this.courses=value.body.data[0];
						this.all_course=value.body.data[0];
						this.course_selected_cno = value.body.data[1];
						this.course_selected=[];
						this.course_not_selected=[];
						for(var i=0;i<this.all_course.length;i++){
							if(this.contains(this.course_selected_cno,this.all_course[i])){
								this.course_selected.push(this.all_course[i]);
							}
							else{
								this.course_not_selected.push(this.all_course[i]);
							}
						}
				},function(reason){
					alert("请求出错");
				});
			        }
			        else{
			            alert("选课失败");
			        }
			    });
			},
			canclecourse:function(parm){
			    this.$http.post("/canclecourse",{cno:parm},{emulateJSON:true}).then(function(value){
			        if(value.body.code==200){
			            var index=0;
			            for(var i=0;i<this.course_selected.length;i++){
			            	if(this.course_selected[i].cno==parm){
			            		this.course_not_selected.push(this.course_selected[i]);
			            		index=i;
			            		break;
			            	}
			            }
			            var arr=new Array();
			            for(var k=0;k<this.course_selected.length;k++){
			            	if(k!=index){
			            		arr.push(this.course_selected[k]);
			            	}
			            }
			            this.course_selected=arr;
			            console.log(this.course_selected);
			            console.log(this.course_not_selected);
			            alert("退选成功");
			            this.$http.post("/filtercourse/",{college:this.college,cname:this.cname,
						capacity:this.capacity,cno:this.cno,tname:this.tname},{emulateJSON:true}).then(function(value){
						this.courses=value.body.data[0];
						this.all_course=value.body.data[0];
						this.course_selected_cno = value.body.data[1];
						this.course_selected=[];
						this.course_not_selected=[];
						for(var i=0;i<this.all_course.length;i++){
							if(this.contains(this.course_selected_cno,this.all_course[i])){
								this.course_selected.push(this.all_course[i]);
							}
							else{
								this.course_not_selected.push(this.all_course[i]);
							}
						}
				},function(reason){
					alert("请求出错");
				});
			        }
			        else{
			            alert("退选失败");
			        }
			    });
			},
			getcoursebytype:function(parm){
				this.$http.post("/filtercourse/",{college:this.college,cname:this.cname,
				capacity:this.capacity,cno:this.cno,tname:this.tname},{emulateJSON:true}).then(function(value){
					this.courses=value.body.data[0];
					this.all_course=value.body.data[0];
					this.course_selected_cno = value.body.data[1];
					this.course_selected=[];
					this.course_not_selected=[];
					for(var i=0;i<this.all_course.length;i++){
						if(this.contains(this.course_selected_cno,this.all_course[i]) && this.all_course[i].courseType==parm){
							this.course_selected.push(this.all_course[i]);
						}
						if(!this.contains(this.course_selected_cno,this.all_course[i]) && this.all_course[i].courseType==parm){
							this.course_not_selected.push(this.all_course[i]);
						}
					}
				},function(reason){
					alert("请求出错");
				});
			}
		}
	})
</script>